<template>
    <div class="specialDetail">
       <van-nav-bar title="专栏详情" left-text="返回" left-arrow @click-left="$router.go(-1)" />
       <div class="content">
          <h3>{{detail.title}}</h3>
          <img :src="detail.pic" alt="">
          <div v-html="detail.content"></div>
       </div>
    </div>
</template>
<script>
import { getNewDetail } from '../../api/second/index.js';
import { useRoute } from 'vue-router';
import { ref } from 'vue';
export default {
  setup(props) {
    const { query } = useRoute();
    const detail = ref({});
    getNewDetail({id:query.id}).then(res => {
       detail.value = res.data;
    })
    return{
      detail
    }
  }
}
</script>

<style lang="scss" scoped>
.specialDetail{
  height: 100%;
  .content{
    height: calc(100% - 46px);
    overflow: auto;
    text-align: center;
    padding: 0 10px;
    h3{
      line-height: 60px;
    }
    img{
      width: 100%;
    }
  }
  :deep(p){
    font-size: 16px!important;
    color: #333;
    line-height: 30px;
    text-indent: 32px;
  }
}
</style>
